<!--  -->
<template>
  <div>
    <van-nav-bar title="注册" fixed placeholder
    left-arrow @click-left="onClickLeft"/>
    <van-form @submit="onSubmit" class="regFrm">
      <van-field
        v-model="tel"
        name="tel"
        label="手机号"
        placeholder="手机号"
        :rules="telRules"
      />
      <van-field
        v-model="password"
        name="password"
        type="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password2"
        name="password2"
        type="password"
        label="确认密码"
        placeholder="确认密码"
        :rules="passRules"
      />
      <div class="getCode">
        <van-field
        v-model="yanzheng"
        name="yanzheng"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div>
        <van-button color="#7232dd" plain size="mini" @click="getCode">验证码</van-button>
      </div>
      </div>
      <div style="margin: 50px 30px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name:'reg',
  data () {
    return {
      yanzheng:'',
      tel:'',
      password:'',
      password2:'',
      telRules: [{
            required: true,
            message: '手机号码不能为空',
            trigger: 'onBlur'
        }, {
          // 自定义校验规则
            validator: value => {
                return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                    .test(value)
            },
            message: '请输入正确格式的手机号码',
            trigger: 'onBlur'
        }],
      passRules:[
        {
          required: true,
          message: '密码不能为空',
          trigger: 'onBlur'
        },
        {
        validator: value => {
            return  value==this.password
          },
          message: '两次密码不一致',
          trigger: 'onBlur'
        }
      ]
    }
  },
  methods: {
    getCode(){
      this.$axios.post('/api/login/phone?phone='+this.tel).then((res)=>{
        console.log(res)
        if(res.data.code==200){
          this.$toast.success('验证码已发送，请注意查收');
        }
      })
    },
    onSubmit(values) {
      console.log('submit', values);
      this.$axios({
        url:'/api/reg',
        method:"post",
        params:{
          phone:values.tel,
          password:values.password,
          vCode:values.yanzheng
        }
      }).then(res=>{
        console.log(res)
        if(res.data.code==200){
          var userInfo = {
            tel:values.tel,
            password:values.password
          }
          sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
          this.$router.push('/login')
        }else{
          this.$toast.fail("注册失败")
        }
      })
    },
    onClickLeft(){
      this.$router.push('/my')
    }
  }
}
</script>

<style  scoped>
.regFrm{
  margin: 50px 20px;
}
.getCode{
  display: flex
}
.getCode>.van-field{
  width: 80%;
}
.getCode>.van-button{
  margin-top: 10px;
}
</style>
